<template>
    <div class="box">
        <h2>Provide-Inject</h2>
        <br>
        <div>content1: {{ content1 }}</div>
        <div>content2.name: {{ content2.name }}</div>
        <button @click="changeContent1">修改content1</button><br>
        <button @click="changeContent2">修改content2</button><br>
        <button @click="changeContent2Name">修改content2的name属性</button><br>
        <br>
        <Child></Child>
    </div>
</template>

<script>
// Provide-Inject 用于祖孙之间的通信
// --------------------------------------
// 步骤:
// 1. 祖先组件中使用 Provide 进行广播
// provide 和data的写法一样,是一个函数,把需要广播给后代的数据在return的对象中配置即可
// 2. 后代组件中使用 Inject 进行数据接收
// inject 是一个数组,接收祖先组件广播的数据
// --------------------------------------
// 如果祖先组件的数据发生改变,后代可以接收到吗?
// 当祖先组件的数据发生变化的时候,后代接收的数据并不能发生改变
//   除了修改对象的属性,后代是可以接收到的,对象修改地址,后代接收不到
// 如何理解:
// 可以把Provide理解成一个村口的广播,广播之后,所有的村民只要带耳朵(inject)都能听到广播的内容(接收数据)
// 只是这个广播只广播一次,在页面初始化的时候,只传递一次参数,后续参数发生变化,后代组件接收不到数据改变的
//   除了对象的属性,对象的属性相当于没有改变对象的地址
import Child from "./Child";
export default {
    name: "ProvideInjectTest",
    components: {
        Child,
    },
    provide() {
        return {
            // 属性名是要广播的数据名称
            // 属性值是当前组件中获取到的数据
            content1: this.content1,
            content2: this.content2
        }
    },
    data() {
        return {
            content1: "jack",
            content2: {
                name: "tom",
            },
        };
    },
    methods: {
        changeContent1() {
            this.content1 = 'Jerry'
        },
        changeContent2() {
            this.content2 = {
                name: 'Tony'
            }
        },
        changeContent2Name() {
            this.content2.name = '赵四'
        },
    },
};
</script>

<style lang="less" scoped>
</style>
